<template>
	<view class="tn-p-sm">

		<uv-checkbox-group v-if="list.length > 0" shape="circle" v-model="check.ids" placement="column">
			<view v-for="x, i in list" :key="i">
				<view class="flex flex-1 flex-align-center tn-mb-lg">

					<view class="tn-pr-xs">
						<uv-checkbox size="45rpx" :name="x.id" activeColor="#ff444f" iconSize="36rpx"
							:disabled="x.stock < 1" />
					</view>

					<uv-image :src="x.goods.cover" height="100rpx" width="100rpx" radius="10rpx" :lazy-load="true" />

					<view class="flex-1 flex-y tn-pl-xs">
						<view class="tn-text-sm">
							<text>{{ x.goods.name }}</text>
							<text class="ta-desc-color"> ( {{ showSpec(x.gspec) }} ) </text>
						</view>
						<view v-for="(xx, i) in x.goods.items" :key="i" class="tn-mt-xs" v-show="xx.ghash === x.ghash">
							<view v-if="xx.ghash === x.ghash" class="flex flex-align-center flex-x-between">
								<view class="flex-center tn-text-xs ta-desc-text">
									原价 {{ Number(xx.price_market) }} 元，售价 {{ Number(xx.price_selling) }} 元
								</view>
								<view v-if="x.stock > 0">
									<uv-number-box :min="0" :max="x.stock" v-model="x.number" @change="change(x)" />
								</view>
								<view v-else class="tn-text-sm ta-desc-text">
									<uv-text size="25rpx" type="error" @click="remove(x)" text="无库存, 删除记录" />
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</uv-checkbox-group>

		<view v-if="list.length < 1" style="padding:300rpx 0">
			<uv-empty mode="car" icon="/static/imgs/empty/car.png" />
			<view class="tn-pt-xl flex-center">
				<uv-button @click="goto.cate()" shape="circle" text='查看更多商品' />
			</view>
		</view>

		<view class="footer" v-if="list.length > 0">
			<view class="footer-button-group">
				<uv-transition :show="!loading" mode="slide-bottom">
					<view class="flex-x">

						<uv-button shape="circle" type="warning"
							customStyle="width:450rpx;height:90rpx;border-top-right-radius:0;border-bottom-right-radius:0">
							已选 {{ check.ids.length }} 件商品，共 {{ check.amount }} 元
						</uv-button>

						<uv-button shape="circle" type="error" @click="confirm" text="下单结算"
							customStyle="width:200rpx;height:90rpx;border-top-left-radius:0;border-bottom-left-radius:0" />

					</view>
				</uv-transition>
			</view>
		</view>

	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { TaUseAccount, TaToast, TaDataBase, TaDataOrder } from '@/utils'

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			list: <any[]>[],
			check: <any>{
				ids: <any>[],
				nums: <number>0,
				amount: <any>0,
			},
			loading: <boolean>true,
		}
	},
	onReady() {
		this.loadData()
		TaDataBase.page('购物车', true)
	},
	onPullDownRefresh() {
		this.loadData();
		setTimeout(() => uni.stopPullDownRefresh(), 1500)
	},
	watch: {
		list: {
			deep: true,
			handler() {
				let check: any = { ids: [], nums: 0, amount: 0 }
				this.list.forEach((x: any) => {
					if (x.check) {
						check.ids.push(x.id)
						check.nums += Number(x.number)
						check.amount += Number(x.number) * Number(x.specs.price_selling)
					}
				})
				this.check = check;
			}
		}
	},
	methods: {
		loadData() {
			TaDataOrder.cartGet().then((ret: any) => {
				ret.data.list.forEach((x: any) => {
					x.check = true;
					x.stock = x.specs.stock_total - x.specs.stock_sales;
				});
				this.list = ret.data.list;
				this.loading = false;
			})
		},
		change(x: any) {
			this.$nextTick(() => {
				let data: any = { ghash: x.ghash, number: x.number }
				x.number > 0 ? TaDataOrder.cartSet(data) : this.remove(x)
			})
		},
		remove(x: any) {
			let data: any = { ghash: x.ghash, number: 0 }
			TaToast.confirm('确认要删除该记录吗？').then(() => {
				TaDataOrder.cartSet(data).then(() => this.loadData())
			}).catch(() => x.number = 1)
		},
		confirm() {
			console.log(this.check)
			if (this.check.nums < 1) {
				return TaToast.error('请选择商品')
			} else {
				TaDataOrder.add({ carts: this.check.ids.join(',') })
			}
		}
	}
})
</script>

<style lang="scss">
.footer {
	left: 0;
	right: 0;

	/* #ifndef H5 */
	bottom: 50rpx;
	/* #endif */

	/* #ifdef H5 */
	bottom: 150rpx;
	/* #endif */

	display: flex;
	position: fixed;
	align-items: center;
	justify-content: center;

	&-button {

		min-width: 8em !important;
		font-size: 26rpx !important;
		border-radius: 0 !important;

		&-group {
			width: auto;
			overflow: hidden;
			background: white;
			border-radius: 100rpx;
		}

		&-text {
			padding: 35rpx 25rpx 35rpx 35rpx !important;
		}

		&-buye {
			padding: 35rpx 25rpx 35rpx 15rpx !important;
		}
	}
}
</style>